<template>
	<view class="homepage">
		<view class="pop_bg" v-if="head" @tap="closeNavSwitch" @touchmove.stop.prevent>
			<view class="pop_bg_item1">
				<view class="left_item" @tap.stop="handelTapBarMenu(item.type)" v-for="(item, index) in titledata"
					:key="index">
					<i :class="item.pic"></i>{{ item.title }}
				</view>
			</view>
		</view>
		<view style="width: 100%;height: 324upx;z-index: 999;">
			<image src="../../static/images/schoolbg.png" style="width: 100%;height: 100%;"></image>
		</view>
		<view class="homepage-body-content">
			<view class="user-img">
				<headimg :realSrc="personInfo.avatar"></headimg>
			</view>

			<view class="homepage-body-view">
				<view class="homepage-body">
					<view class="user-nicheng">{{personInfo.nicheng ? personInfo.nicheng : '未设置昵称'}}</view>
					<view class="user-address">
						<text v-if="personInfo.provinec_id != 0">{{personInfo.pro}}</text>
						<text v-if="personInfo.city_id != 0">，{{personInfo.city}}</text>
						<text v-if="personInfo.area_id != 0">，{{personInfo.area}}</text>
					</view>
					<view class="user-autograph">{{personInfo.signature ? personInfo.signature :'这个人很懒，什么都没有留下'}}</view>
					<view class="user-fans-content">
						<view class="user-fans">
							<navigator
								:url="'/pages/album/teacher-home-fans?type=1&userId='+user_id+'&sex='+personInfo.sex"
								hover-class="false" class="fans_num">
								<view class="num">{{personInfo.fans_num}}</view>
								<view class="title">粉丝</view>
							</navigator>
							<navigator
								:url="'/pages/album/teacher-home-fans?type=2&userId='+user_id+'&sex='+personInfo.sex"
								hover-class="false">
								<view class="follow-num">{{personInfo.follow_num}}</view>
								<view class="follow-title">关注</view>
							</navigator>
							<view>
								<view class="dianzan-num">{{personInfo.start_num}}</view>
								<view class="dianzan-title">获赞</view>
							</view>
						</view>
						<view class="follow-chat">
							<view class="follow-btn" style="background-color: #DDDDDD;"
								v-if="personInfo.is_mutual_follow!=null" @tap="follow" v-show="user_id != myId">已关注
							</view>
							<view class="follow-btn" v-else @tap="follow" v-show="user_id != myId">关注</view>
							<view class="chat" @click="gochat">
								<i class="iconfont iconxiaoxi1"></i>
							</view>
						</view>
					</view>
					<view class="classes-content">
						<view class="classes-body">
							<view class="classes-icon"><i class="iconfont iconbaocun-info"></i></view>
							<view class="classes-title">课程展台</view>
							<view class="classes-num">17套课程</view>
						</view>
						<view><i class="iconfont icon-fanhui"></i></view>
					</view>

					<view class="photo-content">
						<view class="photo-title-content">
							<view class="title">相册</view>
							<navigator hover-class="false" :url="'../album/album-home?userId='+user_id+'&personInfo='+JSON.stringify(personInfo)" class="more">更多</navigator>
						</view>
						<view class="photo-body">
							<view class="photo-item" v-for="(item,index) in imgList" :key="index" @click="checkImg(item)">
								<image :src="item.img_url" mode="aspectFill"></image>
							</view>
						</view>
					</view>

					<view class="shipin-view">
						<view class="shipin-title-content">
							<view class="title">视频</view>
							<navigator hover-class="false" class="more"
								:url="'/pages/album/album-video?user_id='+user_id">更多</navigator>
						</view>

						<view class="shipin-content">
							<view class="shipin-item" v-for="(item, index) in videoList" :key="index"
								@click="clickVideo(item,index)">
								<view class="shipin-item-left">
									<image :src="item.img_url" mode="aspectFill"></image>
									<i class="iconfont iconbofang"></i>
								</view>
								<view class="shipin-item-right">
									<view class="shipin-item-title">{{item.title}}</view>
									<view class="shipin-item-time">
										{{item.readnum > 9999 ? item.readnum/10000+'w':item.readnum}}次观看·{{item.time}}
									</view>
								</view>
							</view>
						</view>

					</view>

					<view class="article-content">
						<view class="art-head-content">
							<view class="art-title">文章</view>
							<navigator hover-class="false" class="more"
								:url="'/pages/album/album-article?user_id='+user_id">更多</navigator>
						</view>

						<navigator hover-class="false"
							:url="'../articleModule/newarticle-detail?stateType=0&addType=9&top=1&article_id='+item.article_id"
							class="article-body" v-for="(item ,index ) in list" :key="index">
							<!-- #原创发布图片视频显示开始 -->
							<view class="article-img" v-if="item.img_url && item.type == 1">
								<image :src="item.img_url" mode="aspectFill"></image>
							</view>
							<template v-if="!item.img_url && item.type == 1">
								<view class="article-img" v-if="item.article_video == 1 && item.imgList && item.imgList.length > 0 && (!item.videoList || (item.videoList && item.videoList.length == 0))">
									<image :src="item.imgList[0]" mode="aspectFill"></image>
								</view>
								<view class="videoBg" v-if="((item.article_video == 1 && item.videoList && item.videoList.length > 0) || item.article_video == 2)">
									<image :src="item.videoImage_url" mode="aspectFill"></image>
									<i class="iconfont iconbofang"></i>
								</view>
							</template>
							<!-- 原创发布图片视频显示结束# -->
							<!-- #转发开始 -->
							<template v-if="item.type == 2">
								<view class="article-img" v-if="item.fowImgUrl">
									<image :src="item.fowImgUrl" mode="aspectFill"></image>
								</view>
								<view class="videoBg" v-if="item.videoImage_url">
									<image :src="item.videoImage_url" mode="aspectFill"></image>
									<i class="iconfont iconbofang"></i>
								</view>
							</template>
							<!-- 转发结束# -->
							<view class="article-title">{{item.title}}</view>
							<view class="article-message" v-if="item.article_video == 1 && item.type == 1" v-html="item.content"></view>
							<view class="article-message" v-if="item.article_video == 1 && item.type == 2" v-html="item.subhead_content"></view>
						</navigator>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import headimg from '@/components/head_img.vue'
	import util from '@/common/util.js';
	import Univideo from './components/video.vue'
	import UniArticle from './components/article.vue'
	import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue';
	import provinceData from '@/components/mpvue-citypicker/city-data/province.js';
	import cityData from '@/components/mpvue-citypicker/city-data/city.js';
	import areaData from '@/components/mpvue-citypicker/city-data/area.js';
	export default {
		components: {
			Univideo,
			UniArticle,
			uniLoadMore,
			headimg
		},
		data() {
			return {
				defimg: this.defimg,
				isVideo: true,
				tabList: ['作品', '文章'], //选项卡列表
				tabIndex: 0, //选项卡索引
				head: false,
				titledata: [{
						pic: '',
						title: '搜索',
						type: 'search'
					},
					{
						pic: '',
						title: '我的收藏',
						type: 'collect'
					},
					{
						pic: '',
						title: '内容管理',
						type: 'content'
					},
					{
						pic: '',
						title: '文章草稿',
						type: 'article'
					}
				],
				isShow: false,
				list: [], //文章列表
				page: 1,
				reload: true,
				status: 'more',
				contentText: {
					contentdown: '上拉加载更多',
					contentrefresh: '加载中',
					contentnomore: '没有更多',
					contentnot: "没数据"
				},
				user_id: '',
				wrongList: [], //违规消息列表
				personInfo: {}, //主页信息
				videoList: [], //视频列表
				black_state: 1, //拉黑状态 0为正常，1为拉黑
				pagesize: 8,
				myId: uni.getStorageSync('userInfo').id,
				imgList: [],
			}
		},
		onNavigationBarButtonTap() {
			this.head = !this.head;
		},
		/* 屏幕移动到一定距离如果没有关注，则出现关注图标 */
		onPullDownRefresh() {
			this.reload = true;
			this.page = 1;
			this.getList();
			this.getVideo();
			setTimeout(function() {
				uni.stopPullDownRefresh();
			}, 1000);
		},
		onLoad(e) {
			if (e.user_id) {
				this.user_id = e.user_id;
			} else {
				this.user_id = this.myId;
			}
			if (this.user_id != this.myId) {
				// #ifdef APP-PLUS
				var webView = this.$mp.page.$getAppWebview();
				webView.setTitleNViewButtonStyle(0, {
					width: '0',
					text: ''
				});
				// #endif
			}
		},
		onShow() {
			// this.getWrong();
			this.getPerson();
			this.getphoto();
			this.getVideo();
			this.getList();
		},
		methods: {
			gochat: function() {
				if(this.user_id != this.myId){
					let data = {
						avatar: this.personInfo.avatar,
						user_id: this.user_id,
						nicheng: this.personInfo.nicheng,
						is_mutual_follow: this.personInfo.is_mutual_follow
					}
					uni.navigateTo({
						url: '../album/online-service?data=' + JSON.stringify(data)
					})
				}else{
					uni.navigateTo({
						url:'../album/message'
					})
				}
			},
			// 查看图片
			checkImg(item) {
				uni.navigateTo({
					url: '/pages/album/album-query?type=homePage&imgItem=' + encodeURIComponent(JSON.stringify(item)) + '&albumId=' + item.pid + '&videoId=' + item.video_id+'&personInfo='+JSON.stringify(this.personInfo)+'&userId='+this.user_id+"&top="+2
				})
			},
			getphoto: function() {
				this.$api.apiPost('user/video.Photo/Imglimit', {
					from_id: this.user_id
				}).then(res => {
					if (res.data.code == 200) {
						this.imgList = res.data.data;
					}
				});
			},
			// 导航栏按钮点击事件
			handelTapBarMenu(type) {
				if (type == 'search') {
					uni.navigateTo({
						url: '/pages/album/home-sreach'
					})
				}
				if (type == 'collect') {
					uni.navigateTo({
						url: '/pages/album/home-mycollect'
					})
				}
				if (type == 'content') {
					uni.navigateTo({
						url: '/pages/album/article-admin'
					})
				}
				if (type == 'article') {
					uni.navigateTo({
						url: '/pages/album/drafts'
					})
				}
				this.head = false
			},
			// 关闭蒙版
			closeNavSwitch() {
				this.head = false;
				this.leftNavSwitch = false;
			},
			// 播放视频
			clickVideo(item, index) {
				// uni.navigateTo({
				// 	url: './components/web-view?src=' + item.video_url + '&title=' + item.title
				// })
				var type = 3;
				if (this.user_id != this.myId) {
					var type = 2;
				}
				uni.navigateTo({
					url: '/pages/topic/videoDetail?index=' + index + '&pagesize=9&type=' + type + '&user_id=' +
						this.user_id
				})
			},
			/* 获取黑名单状态 */
			getBlack() {
				this.$api.apiPost('user/video.User/UserBlackState', {
					form_id: this.user_id
				}).then(res => {
					if (res.data.code == 200) {
						this.black_state = res.data.data.black_state;
						if (this.black_state == 0) {
							this.getWrong();
							this.tabIndex == 0 ? this.getVideo() : this.getList()
							this.getPerson();
						} else {
							uni.showModal({
								title: '提示',
								content: '对方处于您的黑名单中，无法查看对方任何信息',
								showCancel: false,
								confirmColor: '#00D5A2',
								success: function(res) {
									if (res.confirm) {
										uni.navigateBack({
											delta: 2
										})
									}
								}
							})
						}
					}
				})
			},
			/* 获取个人信息 */
			getPerson() {
				var url = '';
				var data = {}
				if (this.user_id && this.user_id != this.myId) {
					url = 'user/video.User/UserHomeByFrom';
					data.form_id = this.user_id;
				} else {
					url = 'user/video.User/UserHomePage';
				}
				this.$api.apiPost(url, data).then(res => {
					if (res.data.code == 200) {
						this.personInfo = res.data.data;
						uni.setNavigationBarTitle({
							title: this.personInfo.nicheng ? this.personInfo.nicheng : '用户中心'
						})
						var index1 = 0; //省的索引
						for (var i = 0; i < provinceData.length; i++) {
							if (provinceData[i].value == Number(this.personInfo.provinec_id)) {
								this.personInfo.pro = provinceData[i].label;
								index1 = i;
							}
						}
						var index2 = 0; // 市的索引
						for (var i = 0; i < cityData[index1].length; i++) {
							if (cityData[index1][i].value == Number(this.personInfo.city_id)) {
								this.personInfo.city = cityData[index1][i].label;
								index2 = i;
							}
						}
						for (var i = 0; i < areaData[index1][index2].length; i++) {
							if (areaData[index1][index2][i].value == Number(this.personInfo.area_id)) {
								this.personInfo.area = areaData[index1][index2][i].label;
							}
						}
					} else {
						this.personInfo = {};
					}
				})
			},
			/* 获取违规推送消息 */
			getWrong() {
				this.$api.apiPost('user/article.Users/punishList').then(res => {
					if (res.data.code == 200) {
						this.wrongList = res.data.data;
					} else {
						this.wrongList = [];
					}
				})
			},
			/* 关闭当前违规提示 */
			closeItem(dispose_id) {
				this.$api.apiPost('user/article.Users/punishLook', {
					dispose_id: dispose_id
				}).then(res => {
					if (res.data.code == 200) {
						this.getWrong();
					}
				})
			},
			/* 查看违规详情 */
			detail(article_id, dispose_id, type) {
				this.closeItem(dispose_id);
				this.isShow = false;
				uni.navigateTo({
					url: '../complain/be-reported?article_id=' + article_id + '&type=' + type
				})
			},
			/* 关注 & 取消关注 */
			follow() {
				var url = '';
				let is_mutual_follow = '';
				if (this.personInfo.follow_state == 1) {
					url = 'user/video.User/UserFollowDel';
					is_mutual_follow=null;
				} else {
					url = 'user/video.User/UserFollowAdd';
					is_mutual_follow=1;
				}
				this.$api.apiPost(url, {
					form_id: this.user_id
				}).then(res => {
					uni.showToast({
						title: res.data.msg,
						icon: 'none'
					})
					let chatuserlist=uni.getStorageSync('chatuserlist');
					if(chatuserlist){
						var toid = JSON.stringify(Number(this.user_id));
						if (chatuserlist[toid]) {
							chatuserlist[toid]['is_mutual_follow'] = is_mutual_follow;
							uni.setStorageSync('chatuserlist', chatuserlist);
						}
					}
					this.getPerson();
				})
			},
			/* 切换tab */
			tabClick(index) {
				this.tabIndex = index;
				this.page = 1;
				this.reload = true;
				if (index == 0) {
					this.isVideo = true;
					if (this.black_state == 0) {
						this.getVideo();
					}
				} else if (index == 1) {
					this.isVideo = false;
					if (this.black_state == 0) {
						this.getList();
					}
				}
			},
			/* 获取作品列表 */
			getVideo() {
				this.videoList = []
				var data = {
					page: this.page,
					pagesize: 4
				}
				var url = ''
				if (this.user_id && this.user_id != this.myId) {
					data.form_id = this.user_id;
					url = 'user/video.Lists/VideoListByForm';
				} else {
					url = 'user/video.Lists/VideoListByOne';
				}
				this.$api.apiPost(url, data).then(res => {
					if (res.data.code == 200) {
						var list = res.data.data.data;
						list.forEach((item) => {
							item.time = util.getLeftTime(item.creat_time);
						})
						this.videoList = this.reload ? list : this.videoList.concat(list);
						this.reload = false;
						this.status = 'more';
					} else {
						this.page = this.page == 1 ? this.page : this.page -= 1
						if (this.reload) {
							this.videoList = [];
						} else {
							this.status = 'noMore';
						}
					}
				})
			},
			/* 查看视频详情 */
			videoDetail(index) {
				if (this.user_id && this.user_id != this.myId) {
					uni.navigateTo({
						url: '../topic/videoDetail?index=' + index + '&pagesize=' + this.pagesize + '&type=2' +
							'&user_id=' + this.user_id
					})
				} else {
					uni.navigateTo({
						url: '../topic/videoDetail?index=' + index + '&pagesize=' + this.pagesize + '&type=3'
					})
				}
			},
			/* 获取文章列表 */
			getList() {
				this.list = []
				var data = {
					page: this.page,
					pagesize: 7,
					users_type: 1,
					is_draft: 1
				}
				if (this.user_id && this.user_id != this.myId) {
					data.user_id = this.user_id;
					data.is_check = 2;
				} else {
					data.is_user = 1;
				}
				this.$api.apiPost('user/article.Lists/articleList', data).then(res => {
					if (res.data.code == 200) {
						var list = res.data.data.data;
						list = util.artHandle(list);
						for (var i = 0; i < list.length; i++) {
							list[i].time = util.getLeftTime(list[i].creat_time);
							if (list[i].subhead_creat_time) {
								list[i].ftime = util.getLeftTime(list[i].subhead_creat_time);
							}
						}
						this.list = this.reload ? list : this.list.concat(list);
						this.reload = false;
						this.status = 'more';
					} else {
						this.page = this.page == 1 ? this.page : this.page -= 1
						if (this.reload) {
							this.list = [];
						} else {
							this.status = 'noMore';
						}
					}
					for (var i = 0; i < this.list.length; i++) {
						if (this.list[i].subhead_content){
							/* 单单取出富文本src里的路径 */
							let url = this.list[i].subhead_content.replace(/&amp;/g,'&').replace(/&lt;/g,'<').replace(/&gt;/g,'>').replace(/&quot;/g,'"').replace(/<.*src=\"/g,'').replace(/\".*>/g,'')
							/* this.list[i].subhead_content = this.list[i].subhead_content.replace(/&amp;/g,'&').replace(/&lt;/g,'<').replace(/&gt;/g,'>').replace(/&quot;/g,'"').replace(/<.*src=\"/g,'').replace(/\".*>/g,'') */
							if (url.indexOf('.jpg') != -1){
								this.list[i].fowImgUrl = url
							}else if(url.indexOf('.mp4') != -1){
								let num =Math.round(Math.random() * 3);		//随机生成背景图索引
								this.list[i].videoImage_url = this.artBgs[num];
							}
							this.list[i].subhead_content = this.list[i].subhead_content.replace(/&amp;/g,'&').replace(/&lt;/g,'<').replace(/&gt;/g,'>').replace(/&quot;/g,'"').replace(/<video.*video>/g,'').replace(/<img.*">/g,'')
							console.log(this.list[i].subhead_content);
						}
					}
					console.log('list',this.list);
				})
			},
			/* 操作展开 & 收起 */
			operation() {
				this.isShow = !this.isShow;
			},
			/* 关闭弹窗 */
			closeButton() {
				this.isShow = false;
			},
			/* 跳转粉丝 */
			linkBean() {
				if (this.user_id) {
					uni.navigateTo({
						url: '../homepage/my-bean?user_id=' + this.user_id
					})
				} else {
					uni.navigateTo({
						url: '../homepage/my-bean'
					})
				}
			},
			/* 跳转关注 */
			linkWatch() {
				if (this.user_id) {
					uni.navigateTo({
						url: '../homepage/my-watch?user_id=' + this.user_id
					})
				} else {
					uni.navigateTo({
						url: '../homepage/my-watch'
					})
				}
			},
			/* 跳转赞*/
			linkZan() {
				if (this.user_id) {
					uni.navigateTo({
						url: '../homepage/my-zan?user_id=' + this.user_id
					})
				} else {
					uni.navigateTo({
						url: '../homepage/my-zan'
					})
				}
			},
			/* 跳转修改简介 */
			edit() {
				if (!this.user_id) {
					uni.navigateTo({
						url: 'edit?text=' + this.personInfo.autograph
					})
				}
			},
			/* 加入黑名单 */
			inBlack() {
				this.$api.apiPost('user/video.User/BlackAdd', {
					form_id: this.user_id
				}).then(res => {
					uni.showToast({
						title: res.data.msg,
						icon: 'none'
					})
					if (res.data.code == 200) {
						setTimeout(function() {
							uni.navigateBack({
								delta: 1
							})
						}, 1000);
					}
				})
			},
			/* 点赞 */
			islike(data) {
				var type = data.type; // 0视频列表 1文章列表
				var index = data.index;
				var is_like = data.is_like;
				if (type == 0) {
					if (is_like == 2) {
						this.videoList[index].is_like = 0;
						this.videoList[index].likenum--;
					} else {
						this.videoList[index].is_like = 2;
						this.videoList[index].likenum++;
					}
				} else {
					if (is_like == 2) {
						this.list[index].is_like = 0;
						this.list[index].likenum--;
					} else {
						this.list[index].is_like = 2;
						this.list[index].likenum++;
					}
				}
			},
			/* 文章 & 视频数量删除 */
			del(type) {
				if (type == 1) {
					this.personInfo.news_num--
				} else {
					this.personInfo.video_num--
				}
			}
		}
	}
</script>
<style lang="scss">
	page {
		background-color: #FAFAFA;
	}

	.photo-item image {
		border-radius: 10rpx;
	}

	.homepage {
		.pop_bg {
			position: fixed;
			z-index: 600;
			width: 100%;
			height: 100%;
			background-color: rgba(0, 0, 0, 0.5);


			.pop_bg_item1 {
				position: absolute;
				right: 20upx;
				margin-top: 20upx;
				width: 30%;
				background-color: #ffffff;
				border-radius: 10upx;
			}

			.pop_bg_item1:before {
				content: '';
				position: absolute;
				display: inline-block;
				border-width: 18upx;
				border-style: solid;
				border-color: white transparent transparent transparent;
				transform: rotate(180deg);
				top: -30upx;
				right: 5%;
			}

			.left_item {
				display: flex;
				justify-content: center;
				align-items: center;
				position: relative;
				width: 100%;
				font-size: 32upx;
				padding: 15upx 0;
				border-bottom: 1px solid #e5e5e5;
				color: #333333;
			}

			.left_item:last-child {
				border: none;
			}
		}
	}

	.homepage-body-content {
		width: 92%;
		height: 1000upx;
		margin: auto;
		position: relative;
		top: -144upx;
		background-color: #FFFFFF;
		border-radius: 10upx;



		.user-img {
			width: 228rpx;
			height: 228rpx;
			border-radius: 50%;
			position: relative;
			top: -114upx;
			margin: auto;
		}

		.homepage-body-view {
			width: 100%;
			position: relative;
			top: -114upx;
			padding-bottom: 40upx;
			background-color: #FFFFFF;

			.homepage-body {
				width: 92%;
				margin: auto;

				.user-nicheng {
					font-size: 38upx;
					line-height: 38upx;
					color: #333333;
					width: 100%;
					text-align: center;
				}

				.user-address {
					width: 100%;
					display: flex;
					justify-content: center;
					align-items: center;
					margin-top: 20upx;

					text {
						font-size: 26upx;
						color: #333333;
					}
				}

				.user-autograph {
					font-size: 22upx;
					color: #666666;
					margin-top: 20upx
				}

				.user-fans-content {
					width: 100%;
					height: 150upx;
					display: flex;
					justify-content: space-around;
					align-items: center;
					margin-top: 10upx;

					.user-fans {
						width: 50%;
						height: 100%;
						display: flex;
						justify-content: space-between;
						align-items: center;

						.fans_num {
							display: flex;
							justify-content: center;
							flex-direction: column;
							align-items: center;

							.num {
								color: #333333;
								font-size: 38upx;
								text-align: center;
							}

							.title {
								font-size: 26upx;
								color: #C0C4CC;
								margin-top: 10upx;
								text-align: center;
							}
						}

						.follow-num {
							color: #333333;
							font-size: 38upx;
							text-align: center;
						}

						.follow-title {
							font-size: 26upx;
							color: #C0C4CC;
							margin-top: 10upx;
							text-align: center;
						}

						.dianzan-num {
							color: #333333;
							font-size: 38upx;
							text-align: center;
						}

						.dianzan-title {
							font-size: 26upx;
							color: #C0C4CC;
							margin-top: 10upx;
							text-align: center;
						}
					}

					.follow-chat {
						width: 50%;
						display: flex;
						justify-content: flex-end;
						align-items: center;
						height: 100%;

						.follow-btn {
							width: 160upx;
							height: 60upx;
							background: #00D5A2;
							border-radius: 30upx;
							text-align: center;
							line-height: 60upx;
							color: #FFFFFF;
						}

						.chat {
							width: 90upx;
							height: 60upx;
							border-radius: 30upx;
							border: 1px solid #DCDFE6;
							text-align: center;
							line-height: 60upx;
							color: #C0C4CC;
							margin-left: 30upx;
						}
					}
				}

				.classes-content {
					width: 100%;
					padding: 20upx 0upx;
					display: flex;
					justify-content: space-between;
					align-items: center;
					border-top: 1upx solid #DCDFE6;
					border-bottom: 1upx solid #DCDFE6;

					.classes-body {
						display: flex;
						justify-content: flex-start;
						align-items: center;

						.classes-icon {
							color: #00D5A2;
							margin-right: 20upx;
							font-weight: 500;
						}

						.classes-title {
							color: #333333;
							font-size: 26upx;
							margin-right: 20upx;
						}

						.classes-num {
							color: #C0C4CC;
							font-size: 22upx;
						}
					}

					.icon-fanhui {
						color: #00D5A2;
					}
				}

				.photo-content {
					width: 100%;

					.photo-title-content {
						display: flex;
						justify-content: space-between;
						height: 100upx;
						align-items: center;

						.title {
							color: #000000;
						}

						.more {
							color: #C0C4CC;
						}
					}

					.photo-body {
						display: flex;
						justify-content: flex-start;
						flex-wrap: wrap;
						width: 100%;

						.photo-item {
							width: 200upx;
							height: 200upx;
							margin-bottom: 20upx;
							border-radius: 10upx;
							margin-right: calc(50% - 300upx);

							image {
								width: 100%;
								height: 100%;
							}
						}

						.photo-item:nth-child(3n) {
							margin-right: 0;
						}
					}
				}
			}

			.shipin-view {
				width: 100%;

				.shipin-title-content {
					display: flex;
					justify-content: space-between;
					height: 100upx;
					align-items: center;
					padding: 32upx 0;

					.title {
						color: #000000;
					}

					.more {
						color: #C0C4CC;
					}
				}
			}

			.shipin-content {
				width: 100%;
				box-sizing: border-box;

				.shipin-item {
					display: flex;
					align-content: center;
					height: 160upx;
					margin-bottom: 40upx;

					.shipin-item-left {
						width: 260upx;
						margin-right: 20upx;
						position: relative;

						image {
							width: 100%;
							height: 100%;
							position: absolute;
							border-radius: 10upx;
						}

						i {
							position: absolute;
							z-index: 9;
							color: #FFFFFF;
							font-size: 40px;
							background: #000000;
							opacity: 0.5;
							width: 100%;
							height: 100%;
							border-radius: 10upx;
							display: inline-flex;
							justify-content: center;
							align-items: center;

						}
					}

					.shipin-item-right {
						width: calc(100% - 280upx);
						position: relative;

						.shipin-item-title {
							color: #333333;
							font-size: 30upx;
							white-space: normal;
							display: -webkit-box;
							-webkit-box-orient: vertical;
							-webkit-line-clamp: 3;
							overflow: hidden;
							word-break: break-word;
						}

						.shipin-item-time {
							color: #AAAAAA;
							font-size: 26upx;
							position: absolute;
							bottom: 0;
							white-space: nowrap;
							overflow: hidden;
							text-overflow: ellipsis;
						}
					}
				}
			}

			.article-content {
				width: 100%;
				background-color: #FFFFFF;
				padding: 32upx 0;
				box-sizing: border-box;

				.art-head-content {
					display: flex;
					justify-content: space-between;

					.art-title {
						font-size: 32upx;
						font-family: Source Han Sans CN;
						font-weight: 400;
						line-height: 48upx;
						color: #000000;
						opacity: 1;
					}

					.more {
						color: #C0C4CC;
					}
				}

				.article-body {
					border-bottom: 2upx solid #DCDFE6;
					padding: 40upx 0;

					.article-img {
						width: 100%;
						height: 360upx;
						border-radius: 16upx;
						margin-bottom: 20upx;
						position: relative;

						image {
							width: 100%;
							height: 100%;
							border-radius: 16upx;
							position: absolute;
						}
						
						i{
							position: absolute;
							z-index: 9;
							color: #FFFFFF;
							font-size: 40px;
							background: #000000;
							opacity: 0.5;
							width: 100%;
							height: 100%;
							border-radius: 10upx;
							display: inline-flex;
							justify-content: center;
							align-items: center;
						}
					}

					.article-title {
						width: 100%;
						color: #333333;
						font-size: 30upx;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
					}

					.article-message {
						margin-top: 12upx;
						width: 100%;
						line-height: 16px;
						max-height: 48px;
						color: #666666;
						font-size: 22upx;
						overflow: hidden;
						text-overflow: ellipsis;
						display: -webkit-box;
						-webkit-box-orient: vertical;
						-webkit-line-clamp: 3; // 行数
						word-break: break-word;
						line-height: 16px;
						max-height: 48px;
					}

					.videoBg {
						position: relative;
						margin: 20upx 0;
						width: 100%;
						height: 388upx;
						border-radius: 10upx;
						overflow: hidden;
						display: flex;
						justify-content: center;
						align-items: center;

						image {
							position: absolute;
							width: 100%;
							height: 100%;
							border-radius: 10upx;
						}

						& i {
							position: absolute;
							z-index: 9;
							color: #FFFFFF;
							font-size: 80upx;
							background: rgba(0, 0, 0, 0.5);
							width: 100%;
							height: 100%;
							border-radius: 10upx;
							display: inline-flex;
							justify-content: center;
							align-items: center;
						}
					}
				}

				.article-body:last-child {
					border: none;
				}
			}
		}
	}
</style>
